<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>电影信息管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户想看/收藏</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card>
    <el-table :data="FavList" style="width: 100%" border stripe>
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="uid" label="用户名">
        <template slot-scope="scope">
          {{UserName[scope.$index]}}
        </template>
      </el-table-column>
      <el-table-column prop="nm" label="电影名">
        <template slot-scope="scope">
          {{MovName[scope.$index]}}
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型">
        <template slot-scope="scope">
          <span v-if="scope.row.type===1">想看</span>
          <span v-if="scope.row.type===2">收藏</span>
        </template>
      </el-table-column>
      <el-table-column prop="pubDesc" label="上映日期">
        <template slot-scope="scope">
          {{MovPub[scope.$index]}}
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "Fav",
  data(){
    return{
      MovName:[],
      MovPub:[],
      UserName:[]
    }
  },
  computed:{...mapState({
      FavList:state=>state.movie.FavList,
    })},
  beforeCreate() {
    this.$store.dispatch('movie/getFavList')
  },
  created() {
    this.getMovName()
    this.getUser()
  },
  methods: {
    getMovName() {
      this.FavList.map(item => {
        console.log(item)
        this.$http.get('/api2/ajax/detailmovie?movieId=' + item.movieid).then((res) => {
          this.MovName.push(res.data.detailMovie.nm)
          this.MovPub.push(res.data.detailMovie.pubDesc)
        }).catch((error) => {
          console.log(error);
        });
      })
    },
    getUser(){
      this.FavList.map(item=>{
        console.log(item)
        this.$http.get('/api/user/search?id='+item.uid).then((res)=>{
          this.UserName.push(res.data.data.username)
        }).catch((error) => {
          console.log(error);
        });
      })
    },
  }
}
</script>

<style scoped>

</style>
